<button mat-fab (click)="onClickUserInfo()">
  <mat-icon>person</mat-icon>
</button>
<div class="chat-container">
  <mat-card class="main-card">
    <mat-list class="chat-list">
      <mat-list-item *ngFor="let message of messages" [ngClass]="[(message.action === undefined && message.from.id === user.id)? 'chat-list-item': '']">
        <img mat-list-avatar *ngIf="message.action === undefined" [src]="message.from.avatar">
        <h4 mat-line *ngIf="message.action === undefined">
          <b>{{message.from.name}}</b>
        </h4>
        <p mat-line *ngIf="message.action === undefined">
          <span> {{message.content}} </span>
        </p>
        <p mat-line *ngIf="message.action === action.JOINED" class="chat-notification">
          <span translate> <b>{{message.from.name}}</b> joined to the conversation. </span>
        </p>
        <p mat-line *ngIf="message.action === action.RENAME" class="chat-notification">
          <span translate> <b>{{message.content.previousUsername}}</b> is now <b>{{message.content.username}}</b> </span>
        </p>
      </mat-list-item>
    </mat-list>
    <div class="chat-footer-container">
      <mat-icon>message</mat-icon>
      <mat-form-field class="chat-input">
        <input matInput
               #inputMessage
               maxlength="140"
               placeholder="{{'Type your message' | translate}}"
               [(ngModel)]="messageContent"
               (keyup.enter)="sendMessage(messageContent)">
        <mat-hint align="end">{{inputMessage.value.length}}/140</mat-hint>
      </mat-form-field>
    </div>
    <button mat-icon-button [matMenuTriggerFor]="menu" class="button-globe">
      <mat-icon>language</mat-icon>
    </button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item (click)="switchLanguage('en')"><img alt="flag" src="../../../assets/flags/en.png"> English</button>
      <button mat-menu-item (click)="switchLanguage('pt')"><img alt="flag" src="../../../assets/flags/pt.png"> Português</button>
    </mat-menu>
  </mat-card>
</div>
